<template>
  <el-form ref="postForm" :model="postForm" :rules="rules" label-width="80px">
    <Sticky :class-name="'sub-navbar'">
      <div class="web-title"> {{ isEdit?'修改产品':'添加产品' }} </div>
    </Sticky>
    <div class="product-detail-container">
      <el-row>
        <el-col :span="24">
          <el-form-item label="产品名称" prop="title">
            <el-input v-model="postForm.title" placeholder="请输入产品名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="产品简介" prop="thumb">
            <el-input v-model="postForm.thumb" placeholder="请输入产品简介" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="缩略图">
            <el-col :span="5" style="text-align: left">
              <image-upload
                :drag="false"
                :list-type="listType"
                @onSuccess="onUploadSuccess"
                @onRemove="onUploadRemove"
              />
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="图片url" prop="brief">
            <el-input v-model="postForm.brief" :readonly="true" placeholder="请上传缩略图" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="content" label="产品详情">
            <Tinymce ref="editor" v-model="postForm.content" :height="400" />
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align: center">
          <el-button v-waves type="primary" :loading="isSubmit" @click="submitForm()">确认提交</el-button>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>
<script>
import Sticky from '@/components/Sticky/index'
import Tinymce from '@/components/Tinymce'
import waves from '@/directive/waves/waves'
import imageUpload from '@/components/ImageUpload/index'
import { removeSingleImage } from '@/api/web-about'
import { editContent, addProduct, getDetail } from '../../../api/web-product'
export default {
  components: { Sticky, Tinymce, imageUpload },
  directives: { waves },
  props: {
    isEdit: Boolean
  },
  data() {
    return {
      postForm: {
        brief: '',
        content: '请输入产品内容'
      },
      isSubmit: false,
      listType: 'picture',
      isRemoveImage: false,
      oldImageUrl: '',
      rules: {
        title: [
          { required: true, message: '产品名称不能为空', trigger: 'blur' }
        ],
        thumb: [
          { required: true, message: '产品简介不能为空', trigger: 'blur' }
        ],
        brief: [
          { required: true, message: '产品缩略图不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '产品内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    if (this.isEdit) {
      this.getDetail()
    }
  },
  methods: {
    onUploadSuccess(urlFile, file) {
      this.postForm.brief = urlFile
      this.isRemoveImage = true
      console.log(this.isRemoveImage)
    },
    onUploadRemove() {
      const postData = {
        'file': this.postForm.brief
      }
      removeSingleImage(postData).then(response => {
        const { message, status } = response
        if (status === 1) {
          this.$message({
            message: '图片删除成功',
            type: 'success'
          })
          this.isSubmit = false
          this.postForm.brief = this.oldImageUrl
          this.isRemoveImage = false
        } else {
          this.$message({
            message: message,
            type: 'error'
          })
        }
      })
    },
    submitForm() {
      if (!this.isSubmit) {
        this.isSubmit = true
        this.$refs.postForm.validate((valid, file) => {
          if (valid) {
            if (!this.isEdit) {
              this.submitAdd()
            } else {
              this.submitEdit()
              this.isSubmit = false
            }
          } else {
            this.$message({
              message: file[Object.keys(file)[0]][0].message,
              type: 'error'
            })
            this.isSubmit = false
          }
        })
      }
    },
    submitAdd() {
      const postData = {
        'postForm': this.postForm
      }
      addProduct(postData).then((response) => {
        const { message } = response
        this.$notify({
          title: '操作成功',
          message: message,
          type: 'success',
          duration: 2000
        })
        setTimeout(() => {
          this.isSubmit = false
          this.$router.replace('/web-product/index')
        }, 1000)
      }).catch(() => {
        this.isSubmit = false
      })
    },
    submitEdit() {
      const params = this.$route.params
      editContent({ 'postForm': this.postForm, 'id': params.id }).then((response) => {
        const { message } = response
        this.$notify({
          title: '修改成功',
          message: message,
          type: 'success',
          duration: 2000
        })
        if (this.isRemoveImage) {
          const postDataUrl = {
            'file': this.oldImageUrl
          }
          removeSingleImage(postDataUrl).then(response => {
            console.log('原有图片删除成功')
          })
        }
        setTimeout(() => {
          this.isSubmit = false
          this.$router.go(-1)
        }, 1000)
      }).catch(() => {
        this.isSubmit = false
      })
    },
    getDetail() {
      const postDate = this.$route.params
      if (postDate) {
        getDetail(postDate).then((response) => {
          const { data } = response
          this.oldImageUrl = data.brief
          this.setDefaultDate(data)
        })
      }
    },
    setDefaultDate(data) {
      const {
        title,
        content,
        brief,
        thumb
      } = data
      this.postForm = {
        ...this.postForm,
        title,
        content,
        brief,
        thumb
      }
    }
  }
}
</script>

<style lang="scss">
.product-detail-container{
  padding: 40px 50px 20px;
  .upload-container{
    .el-upload{
      text-align: left;
    }
  }
}
</style>
